import React, { Component } from 'react'

export default class App extends Component {
  state = {
    num: 0,
  }
  handleClick = () => {
    /* this.setState({ num: this.state.num + 1 })
    this.setState({ num: this.state.num + 2 })
    this.setState({ num: this.state.num + 3 }) */

    /* this.setState(() => ({ num: this.state.num + 1 }))
    this.setState(() => ({ num: this.state.num + 2 }))
    this.setState(() => ({ num: this.state.num + 3 })) */

    // 第一次下面写法都可以，不影响后续的累加操作
    // this.setState(() => ({ num: this.state.num + 1 }))
    // this.setState((prevState) => ({ num: prevState.num + 1 }))
    this.setState({ num: this.state.num + 1 })
    // prevState 上一次更新完成之后的数据
    this.setState((prevState) => ({ num: prevState.num + 2 }))
    this.setState((prevState) => ({ num: prevState.num + 3 }))

    // !函数的写法，更新数据的表现形式，还是异步
    console.log(this.state.num) // 0
  }
  render() {
    return (
      <div>
        <p>App: {this.state.num}</p>
        {/* onClick => 合成事件 */}
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }
}
